<template>
	<view class="pyg_category">
		<!-- 搜索框开始 -->
		<SearchInput />
		<!-- 搜索框结束 -->
		<!-- 产品分类开始 -->
		<view class="category_list">
			<!-- 左边菜单栏开始 -->
			<scroll-view scroll-y class="category_left">
				<view v-for="(item,index) in categories" @tap="handleItemClick($event)" :data-index="index" :key="index"
					:class="['category_left_item', index === selectIndex?'active':'']">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<!-- 左边菜单栏结束 -->
			<!-- 右边内容开始 -->
			<scroll-view scroll-y class="category_right" :scroll-top="scroll_top">
				<!-- 产品列表开始 -->
				<view class="categories_right_content" v-for="(item,index) in rightContent" :key="index">
					<!-- 标题开始 -->
					<view class="category_right_content_title">
						<!-- /{{" "+item.cat_name+" "}}/ -->
						<text decode>/&nbsp;{{item.cat_name}}&nbsp;/</text>
					</view>
					<!-- 标题结束 -->
					<!-- 图片列表开始 -->
					<navigator class="category_right_content_item" :url="'/pages/goods_list/goods_list?cid='+v.cat_id"
						v-for="(v,i) in item.children" :key="i">
						<view class="image_wrapper">
							<image :src="v.cat_icon"></image>
						</view>
						<view class="cat_name">{{v.cat_name}}</view>
					</navigator>
					<!-- 图片列表结束 -->
				</view>
				<!-- 产品列表结束 -->
			</scroll-view>
			<!-- 右边内容结束 -->
		</view>
		<!-- 产品分类结束 -->
	</view>
</template>

<script>
	import SearchInput from "../../components/search-input.vue"
	export default {
		components: {
			SearchInput
		},
		onShow: function() {
			let cate = uni.getStorageSync("cate");
			if (!cate) {
				this.getCategories();
			} else {
				// 判断一下是否时间过期 10s 
				if (Date.now() - cate.time > 1000 * 10) {
					this.getCategories();
				} else {
					//不过期 同时又请求过数据
					let categories = cate.data;
					//设置右边栏的内容
					const rightContent = categories[0].children;
					//如果页面
					const selectIndex = 0;
					this.categories = categories;
					this.rightContent = rightContent;
					this.selectIndex = selectIndex;
				}
			}
		},
		data() {
			return {
				categories: [], //分类数据
				rightContent: [],
				selectIndex: 0, //默认选中第一个分类
				scroll_top: 0 //滚动条的位置
			}
		},
		methods: {
			//点击左边标题栏
			handleItemClick: function(e) {
				//获取当前标题所在的行数
				const index = e.currentTarget.dataset.index;
				//设置 右边栏 滚动条的位置 默认是在顶部 值为0
				const scroll_top = 0;
				//设置当前点击所在的行数以及右边栏的内容
				this.rightContent = this.categories[index].children;
				this.selectIndex = index;
				this.scroll_top = scroll_top
			},
			/* 
			1. 每次拿到数据之后，先把数据存在存在缓存里面 storage
			同时设置一下缓存时间
			2. 当下次进来的时候
			  a.如果在有效时间内，我们就不发请求；
			  b.如果过了时间，那么就再次请求数据
			 */
			getCategories: async function() {
				const categories = await this.$request({
					url: "/categories"
				});
				const rightContent = categories[0].children;
				const selectIndex = 0;
				uni.setStorageSync("cate", {
					time: Date.now(),
					data: categories
				})
				this.categories = categories;
				this.rightContent = rightContent;
				this.selectIndex = selectIndex;
			}
		}
	}
</script>

<style lang="less">
	.pyg_category .category_list {
		overflow: hidden;
		height: calc(100vh - 100rpx);
	}

	.pyg_category .category_list .category_left {
		height: 100%;
		width: 182rpx;
		background-color: #f3f3f3;
		float: left;
		/*  */
	}

	.pyg_category .category_list .category_left .category_left_item {
		font-size: 28rpx;
		line-height: 40rpx;
		text-align: center;
		margin-top: 37rpx;
	}

	.pyg_category .category_list .category_left .category_left_item:nth-child(1) {
		margin-top: 27rpx;
	}

	.pyg_category .category_list .category_left .active {
		color: var(--themeColor);
		border-left: 4rpx solid #EA4350;
	}

	.pyg_category .category_list .category_right {
		height: 100%;
		float: right;
		width: calc(100vw - 182rpx);
	}

	.pyg_category .category_list .category_right .categories_right_content {
		overflow: hidden;
	}

	.pyg_category .category_list .category_right .categories_right_content .category_right_content_title {
		font-size: 26rpx;
		text-align: center;
		margin-top: 28rpx;
		margin-bottom: 21rpx;
		color: #636363;
	}

	.pyg_category .category_list .category_right .categories_right_content .category_right_content_item {
		width: 33.33%;
		float: left;
		text-align: center;
	}

	.pyg_category .category_list .category_right .categories_right_content .category_right_content_item .image_wrapper image {
		height: 120rpx;
		width: 120rpx;
	}

	.pyg_category .category_list .category_right .categories_right_content .category_right_content_item .cat_name {
		font-size: 21rpx;
	}
</style>
